<template>
  <div id="tprice">
    <Button @click="value = true" type="primary">配置</Button>
    <Drawer
      title="选择配置"
      v-model="value"
      width="420"
      :mask-closable="false"
      
    >
      <Divider>选择作物</Divider>
      <Row justify="space-between">
        <Col span="8" id="k1">
          <Select
            v-model="crop"
            prefix="ios-nutrition-outline"
            style="width: 200px"
          >
            <Option
              v-for="item in crops"
              :value="item.value"
              :key="item.value"
              >{{ item.label }}</Option
            >
          </Select>
        </Col>
        <COl span="16">
          <Button type="primary" @click="scrop" style="margin-left: 40px"
            >确认</Button
          >
        </COl>
      </Row>
      <Divider>n-MA</Divider>
      <Row justify="space-between">
        <COl span="8">
          <span>n:</span>
        </COl>
        <COl span="8">
          <InputNumber :min="1" v-model="man"></InputNumber>
        </COl>

        <COl span="8">
          <Button type="primary" @click="sma" style="margin-left: 40px"
            >确认</Button
          >
        </COl>
      </Row>
      <p>进行消除周期的操作</p>
      <Divider>选择预测的长度（步长为一天）</Divider>
      <!-- <Col span="5" id="k1"> -->
      <Row justify="space-between">
        <COl span="8">
          <span>长度:</span>
        </COl>
        <Col span="8">
          <InputNumber :min="1" v-model="pren"></InputNumber>
        </Col>
        <COl span="8">
          <Button type="primary" @click="spre" style="margin-left: 40px"
            >确认</Button
          >
        </COl>
      </Row>
    </Drawer>
  </div>
</template>

<script>
export default {
  props:{
    crops:Array
  },
  data() {
    return {
      crop: "",
      man: 0,
      pren: 0,
      // crops: [],
      value: false,
    };
  },
  mounted: function () {
  },
  methods: {
    scrop(){
      this.$emit("scrop",this.crop)
    },
    sma(){
      this.$emit("sma",this.man)
    },
    spre(){
      this.$emit("spre",{pren:this.pren,crop:this.crop})
      this.value=false

    }

  },
  watch: {},
};
</script>

<style>
#tprice {
  height: 60px;
  width: 100px;
}
#k1 {
  margin: 5px;
}
#tpriceline {
  height: 500px;
  width: 500px;
}
</style>